import { defineComponent, PropType, ref } from 'vue'
import type { Node } from '@vue-flow/core'

export default defineComponent({
  name: 'NodeConfigModal',
  props: {
    node: {
      type: Object as PropType<Node>,
      required: true,
    },
    onClose: {
      type: Function as PropType<() => void>,
      required: false,
    },
    onSave: {
      type: Function as PropType<(cfg: Record<string, any>) => void>,
      required: false,
    },
  },
  setup(props) {
    const localConfig = ref({ ...props.node.data.config })

    const handleInputChange = (e: Event, field: string) => {
      const target = e.target as
        | HTMLInputElement
        | HTMLTextAreaElement
        | HTMLSelectElement

      if (target instanceof HTMLInputElement && target.type === 'checkbox') {
        localConfig.value = {
          ...localConfig.value,
          [field]: target.checked,
        }
      } else {
        localConfig.value = {
          ...localConfig.value,
          [field]: target.value,
        }
      }
    }

    const handleSave = () => {
      props.onSave?.(localConfig.value)
    }

    const handleCancel = () => {
      props.onClose?.()
    }

    // 基础样式类
    const inputClass = `
      w-full px-3 py-2 
      bg-[#2D1A45] 
      border border-[#3D2A55] 
      rounded-lg
      text-white
      placeholder-gray-500
      focus:border-[#663399] 
      focus:ring-1 
      focus:ring-[#663399]
      transition-colors
    `

    const labelClass = 'block text-sm font-medium text-gray-300 mb-1'
    const sectionClass = 'space-y-4 mb-6'

    return () => (
      <div class="fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-50">
        <div class="min-h-screen flex items-center justify-center p-4">
          <div class="relative bg-[#1A1A1A] rounded-xl shadow-xl w-full max-w-2xl border border-[#3D2A55]">
            {/* 标题栏 */}
            <div class="flex items-center justify-between px-6 py-4 border-b border-[#3D2A55]">
              <div class="flex items-center space-x-3">
                <div
                  class="w-8 h-8 rounded-lg flex items-center justify-center"
                  style={{ backgroundColor: `${props.node.data.color}20` }}
                >
                  <i
                    class={`${props.node.data.icon} text-xl`}
                    style={{ color: props.node.data.color }}
                  />
                </div>
                <div>
                  <h3 class="text-lg font-medium text-white">
                    {props.node.data.label}
                  </h3>
                  <p class="text-sm text-gray-400">{props.node.data.type}</p>
                </div>
              </div>
              <button
                onClick={props.onClose}
                class="text-gray-400 hover:text-white transition-colors"
              >
                <i class="i-mdi-close text-xl" />
              </button>
            </div>

            {/* 配置表单 */}
            <div class="px-6 py-4 max-h-[calc(100vh-200px)] overflow-y-auto">
              {/* 根据节点类型显示不同的配置项 */}
              {props.node.data.type === 'trigger' && (
                <div class={sectionClass}>
                  <div>
                    <label class={labelClass}>触发方式</label>
                    <select
                      class={inputClass}
                      value={localConfig.value.triggerType || 'hotkey'}
                      onChange={(e: Event) =>
                        handleInputChange(e, 'triggerType')
                      }
                    >
                      <option value="hotkey">快捷键</option>
                      <option value="keyword">关键词</option>
                      <option value="schedule">定时</option>
                    </select>
                  </div>

                  {/* 其他配置项保持类似的样式... */}
                </div>
              )}

              {/* Action 和 Output 节点的配置项也类似更新... */}

              <div class={sectionClass}>
                <div>
                  <label class={labelClass}>节点备注</label>
                  <textarea
                    class={`${inputClass} min-h-[80px]`}
                    value={localConfig.value.note || ''}
                    onChange={(e: Event) => handleInputChange(e, 'note')}
                    placeholder="添加节点备注（鼠标悬停时显示）"
                  />
                </div>
              </div>
            </div>

            {/* 底部按钮 */}
            <div class="px-6 py-4 border-t border-[#3D2A55] flex justify-between items-center">
              <div class="text-sm text-gray-400">按 ESC 关闭窗口</div>
              <div class="flex space-x-3">
                <button
                  onClick={handleCancel}
                  class="px-4 py-2 border border-[#3D2A55] rounded-lg text-sm font-medium text-gray-300 hover:bg-[#2D1A45] transition-colors"
                >
                  取消
                </button>
                <button
                  onClick={handleSave}
                  class="px-4 py-2 bg-[#663399] text-white rounded-lg text-sm font-medium hover:bg-[#7B41B7] transition-colors"
                >
                  保存
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  },
})
